<template>
  <!--  运营中心-->
  <div>
    <Rotation :list-data="bannerList"/>
    <div>
      <div class="operation">
        <div class="content" v-for="(item,index) in OperationLIst" :key="index">
          <div class="North" >
            <div v-animate="'queue-bottom'">
              <div class="title">{{item.title}}</div>
              <div class="line"></div>
            </div>
            <div class="operImg" v-animate="'queue-bottom'">
              <img :src="item.src" alt="">
            </div>
          </div>
          <div class="address">
            <div class="addressItem">
              <div v-for="(center,index) in item.OperationCenter" :key="index" class="blockItem" >
                <div class="block" v-animate="'queue-bottom'"></div>
                <div v-animate="'queue-bottom'">{{center}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Rotation from "@/components/Rotation";

export default {
  name: "operation",
  components: {Rotation},
  data() {
    return {
      OperationLIst: [
        {
          title:'华北地区',
          src:require("@/assets/images/yunying/pic1.png"),
          OperationCenter:["承德市运营中心","邯郸市运营中心","天津市运营中心","沧州市运营中心","唐山市运营中心","保定市运营中心","内蒙古运营中心"]
        },
        {
          title:'华中地区',
          src:require("@/assets/images/yunying/pic2.png"),
          OperationCenter:["天津市运营中心"]
        },
        {
          title:'西部地区',
          src:require("@/assets/images/yunying/pic3.png"),
          OperationCenter:["西安市运营中心"]
        },
        {
          title:'华东地区',
          src:require("@/assets/images/yunying/pic4.png"),
          OperationCenter:["承德市运营中心","邯郸市运营中心","天津市运营中心"]
        },
        {
          title:'华南地区',
          src:require("@/assets/images/yunying/pic5.png"),
          OperationCenter:["泉州市运营中心","百色市运营中心"]
        },
        {
          title:'东北地区',
          src:require("@/assets/images/yunying/pic6.png"),
          OperationCenter:["沈阳辽仲证运营中心"]
        }
      ],
      bannerList: [{
        a: '我们的运营中心',
        b: '速裁通大家庭面向全国招募市级运营中心 期待您的加入',
        c: '加入我们',
        d: '400-0311-272',
        src: require("@/assets/images/yunying/pic.png")
      },
        {
          a: '一站式无忧司法配套服务',
          b: '前沿技术+法律支持贯穿整个业务流程 助力金融企业快速处置客户纠纷',
          c: '免费试用',
          d: '更多信息',
          src: require("@/assets/images/yunying/pic.png")
        },
        {
          a: '一站式无忧司法配套服务',
          b: '前沿技术+法律支持贯穿整个业务流程 助力金融企业快速处置客户纠纷',
          c: '免费试用',
          d: '更多信息',
          src: require("@/assets/images/yunying/pic.png")
        },
        {
          a: '一站式无忧司法配套服务',
          b: '前沿技术+法律支持贯穿整个业务流程 助力金融企业快速处置客户纠纷',
          c: '免费试用',
          d: '更多信息',
          src: require("@/assets/images/yunying/pic.png")
        }
      ],
    };
  },
}
</script>

<style scoped lang="less">
.operation {
  width: 80%;
  margin: 150px auto;
  height: 100%;
  background: #FFFFFF;
  box-shadow: 0 0 34px 0 rgba(6, 0, 1, 0.2000);

}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 56px;
}
.content:last-child{
  padding-bottom: 96px;
}

.block {
  width: 19px;
  height: 19px;
  background-color: #5D6E80;
  margin-right: 5.7px;
}

.North {
  display: flex;
  align-items: center;

  .title {
    font-size: 34px;
  }

  .line {
    width: 120px;
    height: 1.9px;
    background-color: #1DD2AF;
    margin-top: 9.6px;
  }
}

.address {
  display: flex;
}


.blockItem {
  display: flex;
  margin: 19px 38px;
  line-height: 19px;

}
.addressItem{
  display: flex;
  flex-wrap: wrap;
  width: 580px;
}

.operImg {

  margin: 0 130px 0 40px;
  border-radius: 50%;
  img{
    width: 168px;
    height: 168px;
  }
}
</style>
